<!DOCTYPE html>
<!-- saved from url=(0147)file:///D:/%E6%A1%8C%E9%9D%A2%E6%96%87%E4%BB%B6/JavaScript-b%E7%AB%99%E5%AD%A6%E4%B9%A0/heima-js/DOM/node/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .nav {
            font-size: 12px;
            position: relative;
        }
        
        .nav li {
            border: 1px solid #fcfcfc;
            border-width: 0 1px;
            color: #4c4c4c;
            display: inline-block;
            line-height: 16px;
            cursor: pointer;
            position: relative;
            z-index: 9999;
            padding: 0 2px 0 0;
            text-decoration: none;
        }
        
        .nav li a {
            display: inline-block;
            height: 17px;
            padding: 12px 15px 12px 18px;
            vertical-align: bottom;
            _overflow: hidden;
            font-style: normal;
        }
        
        .tb_list {
            border: 1px solid #EBBE7A;
            border-top: 0;
            overflow: hidden;
            position: absolute;
            -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
            -webkit-box-shadow: 3px 3px 3px rgb(0 0 0 / 10%);
            box-shadow: 3px 3px 3px rgb(0 0 0 / 10%);
            top: 41px;
            left: 0;
            border-bottom: 1px solid #FECC5B;
            margin: 0 0 -2px;
            padding: 0;
            white-space: nowrap;
        }
        
        .tb_list li {
            line-height: 31px;
            border-bottom: 1px solid #FECC5B;
            display: block;
            /* display: none; */
            color: #333;
            padding: 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="nav">
            <li>
                <a href="file:///D:/%E6%A1%8C%E9%9D%A2%E6%96%87%E4%BB%B6/JavaScript-b%E7%AB%99%E5%AD%A6%E4%B9%A0/heima-js/DOM/node/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.html">导航</a>
                <ul class="tb_list" style="display: none;">
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我</li>
                </ul>
            </li>
            <li>
                <a href="file:///D:/%E6%A1%8C%E9%9D%A2%E6%96%87%E4%BB%B6/JavaScript-b%E7%AB%99%E5%AD%A6%E4%B9%A0/heima-js/DOM/node/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.html">导航</a>
                <ul class="tb_list" style="display: none;">
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我</li>
                </ul>
            </li>
            <li>
                <a href="file:///D:/%E6%A1%8C%E9%9D%A2%E6%96%87%E4%BB%B6/JavaScript-b%E7%AB%99%E5%AD%A6%E4%B9%A0/heima-js/DOM/node/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.html">导航</a>
                <ul class="tb_list" style="display: none;">
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我</li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        // 案例分析
        // 1.导航栏里面的li都要有鼠标经过效果,所以需要循环注册鼠标事件
        // 2.核心原理:当鼠标经过li里面的 第二个子元素ul显示,当鼠标离开ul隐藏

        // 获取元素
        var nav = document.querySelector('.nav');


        var lis = nav.children; // 得到 3个li
        // console.log(lis);
        // 循环注册事件
        for (var i = 0; i < lis.length; i++) {
            // console.log(lis[i].children[1]); // 得到下拉列表的ul

            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>


</body></html>